<template>
	<view>
		<u-navbar title-color="#fff" :borderBottom="false" titleColor="#000000" backIconSize="40" back-icon-color="#ffffff"
		 :background="background"></u-navbar>
		<view class="top">
			<view class="up">
				待结钻 <image src="../static/b3.png" mode=""></image>
			</view>
			<view class="down font">
				1300
			</view>
		</view>
		<view class="content">
			<u-sticky bgColor="transparent">
				<view class="title">
					待结钻明细
				</view>
			</u-sticky>
			<view v-if="list.length>0">
				<view class="list" v-for="(item,index) in list" :key="index">
					<u-lazy-load height="120" image="../static/a0.png" class="icon"></u-lazy-load>
					<view class="left">
						<view class="name">
							蜂巢兑换
						</view>
						<view class="time">
							2020.10.21 19:13
						</view>
					</view>
					<image src="../static/c2.png" class="img"></image>
					<view class="right font" :class="index==0?'add':'sub'">
						+<text>130 </text>
						<image :src="index==0?'../static/b1.png':'../static/b2.png'" mode=""></image>
					</view>
				</view>
			</view>
			<view class="none" v-else>
				<view class="none-view">
					<image src="../../../static/image/none.png" class="none-image"></image>
					<view class="none-name">
						暂无相关数据~
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				background: {
					'background': '#1D1916'
				},
				list: [1, 2],
				current: 0,
			}
		},
		onLoad(option) {
			than = this;
		},
		methods: {
			change(index) {
				than.current = index;
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				const query = uni.createSelectorQuery().in(this);
				query.select('#a' + index).boundingClientRect(data => {
					uni.pageScrollTo({
						scrollTop: data.top - 100,
						duration: 300
					});

				}).exec();
			},
		},
	}
</script>

<style lang="less">
	.none{
		margin: auto;
	}
	.content {
		margin-top: -100rpx;

		.title {
			border-radius: 70rpx 0px 0px 0px;
			padding: 0 59rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			height: 102rpx;
			line-height: 102rpx;
			background: #F4F4F7;
		}

		.list {
			margin: 0 36rpx 20rpx;
			height: 179rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			padding: 0 24rpx;
			position: relative;

			.img {
				position: absolute;
				top: 0;
				right: 125rpx;
				width: 124rpx;
				height: 105rpx;
			}

			.icon {
				width: 120rpx;
				height: 120rpx;
				background: #F2E2D1;
				border-radius: 20rpx;
			}

			.left {
				margin-left: 24rpx;

				.name {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					margin-bottom: 30rpx;
				}

				.time {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #999999;
				}
			}

			.right {
				margin-left: auto;
				font-size: 40rpx;
				font-weight: bold;
				display: flex;
				align-items: center;

				text {
					font-size: 40rpx;
				}

				image {
					margin-left: 10rpx;
					width: 27rpx;
					height: 25rpx;
				}
			}

			.add {
				color: #F46813;
			}

			.sub {
				color: #1B1B1D;
			}
		}
	}

	page {
		background: #F4F4F7;
	}

	.top {
		background: #1D1916;
		padding: 100rpx 60rpx 0;
		color: #E1C9AF;
		height: 450rpx;
		margin-top: -100rpx;

		.up {
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #E1C9AF;

			image {
				width: 42rpx;
				height: 33rpx;
				margin-left: 15rpx;
			}
		}

		.down {
			margin-top: 15rpx;
			font-size: 80rpx;
			font-family: DINCond-Black;
			font-weight: bold;
			font-style: italic;
			color: #E1C9AF;
		}
	}
</style>
